<template>
  <div>
    <el-dropdown
        @command="handleSetI18n"
    >
      <div>
          <div><svg-icon icon="language"></svg-icon></div>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :disabled="language === 'zh'" command="zh">{{$t('language.zh')}}</el-dropdown-item>
          <el-dropdown-item :disabled="language === 'en'" command="en">{{$t('language.en')}}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import {computed} from 'vue';
import {useStore} from 'vuex';
import {useI18n} from 'vue-i18n';
import {ElMessage} from 'element-plus';
const store = useStore();
const language = computed(()=>store.getters.language);
const i18n = useI18n();
const handleSetI18n = language=>{
  // 切换i18n的locale
  i18n.locale.value = language;
  // 修改 vuex 的数据
  store.commit('app/set_language',language);
  ElMessage.success(i18n.t('toast.switchLangSuccess'));
};
</script>

<style scoped lang="scss">

</style>
